<style lang="stylus" scoped>
 @import '../common/stylus/index.styl'
  .main
    margin-top 6px
    .top
      padding 12px 0 18px 0
      display flex
      borderbotton(rgba(7,17,27,0.1))
      .item
        padding 8px 12px
        font-size 14px
        color rgb(77,85,93)
        line-height 16px
        margin-right 8px
        background rgba(77,85,93,0.2)
        border-radius 2px
        span
          font-size 10px
          margin-left 2px
        &.active
          color #fff
          background rgba(0,160,220,0.8)
    .botton
      padding 12px 0
      display flex
      align-items center
      .iconfont
        margin-right 4px
        font-size 24px
        color rgb(147,153,159)
        line-height 24px
        &.active
          color rgba(0,160,220,0.8)
      .txt
        font-size 12px
        color rgb(147,153,159)
        line-height 24px
</style>

<template>
  <div class="main">
    <div class="top">
      <div :class="{active:isactive == 1}"  v-on:click="$emit('change',1)" class="item">全部<span>{{foodL.all}}</span></div>
      <div :class="{active:isactive == 2}"  v-on:click="$emit('change',2)" class="item">推荐<span>{{foodL.good}}</span></div>
      <div :class="{active:isactive == 3}"  v-on:click="$emit('change',3)" class="item">吐槽<span>{{foodL.poor}}</span></div>
    </div>
    <div class="botton" v-on:click="$emit('change',isimg)">
      <span :class="{active:isimg}" class="iconfont icon-gou"></span>
      <span class="txt">只看有内容的评价</span>
    </div>
  </div>
</template>

<script>
export default {
  props:{
    isimg:{
      type:Boolean
    },
    isactive:{
      type:Number
    },
    ratings:{
      type:Array
    }
  },
  computed:{
    foodL() {
      let foodL = {
        all:0,
        good:0,
        poor:0
      }
      foodL.all = this.ratings.length
      this.ratings.map(function(val){
        val.rateType == 0 ? foodL.good++ : foodL.poor++
      })
      return foodL
    }
  }
}
</script>
